forum

home / developersection / forums / what is ui routing in angular js?

Ask Question
Manish Sharma

Admin

When you can't control what's happening, challenge yourself to control the way you respond to what's happening. That's where your power is! Sometimes we need fantasy to survive reality. There is great beauty in simplicity

Follow
Can you answer this question?
Answer

1 Answers

Anubhav Kumar

Anubhav Kumar

19-May-2024

The UI-router module is more flexible and powerful than ngRoute, supporting nested views, multiple-named views, and other advanced features.

 

Include the ui-router module: Include the angular-ui-router.js script in your HTML file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.29/angular-ui-router.min.js"></script>

Define the module dependency: Include ui.router as a dependency in your AngularJS application module.

var app = angular.module('myApp', ['ui.router']);

Configure the states: Use the $stateProvider and $urlRouterProvider to define your states.

<script>
    var app = angular.module('myApp', ['ui.router']);

    app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        console.log($stateProvider, $urlRouterProvider);
        $urlRouterProvider.otherwise('/home');

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'home.html',
                controller: 'HomeController'
            })
            .state('about', {
                url: '/about',
                templateUrl: 'about.html',
                controller: 'AboutController'
            });
    }]);
</script>

Create the controllers and templates: This step remains the same as with ngRoute.

app.controller('HomeController', ['$scope', function ($scope) {
        $scope.message = 'Welcome to the Home Page!';
    }]);

    app.controller('AboutController', ['$scope', function ($scope) {
        $scope.message = 'Learn more About Us!';
    }]);

Set up the main HTML file: Use ui-view to display the routed content.

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <title>AngularJS UI-Router Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.29/angular-ui-router.min.js"></script>
</head>

<body>
    <nav>
        <a ui-sref="home">Home</a>
        <a ui-sref="about">About</a>
    </nav>
    <ui-view></ui-view>
</body>
<script>
    var app = angular.module('myApp', ['ui.router']);
    app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        console.log($stateProvider, $urlRouterProvider);
        $urlRouterProvider.otherwise('/home');

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'home.html',
                controller: 'HomeController'
            })
            .state('about', {
                url: '/about',
                templateUrl: 'about.html',
                controller: 'AboutController'
            });
    }]);
    app.controller('HomeController', ['$scope', function ($scope) {
        $scope.message = 'Welcome to the Home Page!';
    }]);

    app.controller('AboutController', ['$scope', function ($scope) {
        $scope.message = 'Learn more About Us!';
    }]);
</script>

</html>

 

Summary

Routing in AngularJS allows you to create a smooth, single-page application experience by defining multiple views and associating them with specific URLs. The ngRoute module is suitable for simple applications, while ui-router is better for more complex applications that require advanced routing features. By following the steps outlined above, you can set up and manage routing in your AngularJS applications efficiently.

 

Thank you.

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy